<template>
	<view class="confirm-order-wrapper">
	<!-- 	<view class="address-information-wrapper conteainer-public-style mg24">
			<view class="flex-c">
				<uni-tag text="默认"  style="background-color: #EC5581; border: none;" />
				<view class="province-city-area fz32">
					陕西省西安市雁塔区
				</view>
			</view>
			<view class="">
				<view class="flex-c-s">
					<text class="address-info fz32">电视塔地铁口192号（来安中心大厦）</text>
					<uni-icons type="forward" color="#999" size="22"></uni-icons>
				</view>
				
				<view class="consignee-phone fz26">
					<text>胡女士 18992837865</text>
				</view>
			</view>
		</view> -->
		<view class="order-goods-wrapper conteainer-public-style mg24">
			<view class="store-info flex-c">
				<image style="width: 36rpx; height: 36rpx; margin-right: 10rpx;" src="/static/images/store-b.png" mode=""></image>
				<text class="fz30">啪蕾斯成人用品商城</text>
			</view>
			<view class="goods-order-info flex-c-s">
				<view class="goods-info flex-c">
					<view class="">
						<image style="width: 172rpx; height: 174rpx; border-radius: 16rpx;" :src="goodsInfo.listImage" mode=""></image>
					</view>
					<view class="goods-name text-flemp2 fz26">
						{{ goodsInfo.name }}
					</view>
				</view>
				<view class="flex-c-col" style="width: 200rpx;">
					<view class="color-theme fz28">
						金额 ￥{{ goodsInfo.sellingPrice }}
					</view>
					<view class="color-theme gray-color fz26">
						原价：￥{{ goodsInfo.originalPrice }}
					</view>
					<view class="">
						<uni-number-box :min="1" v-model="count"  @change="changeValue" />
					</view>
				</view>
			</view>
			<view class="add-remark flex-c-s" style="padding: 30rpx 0 0 0;">
				<text class="fz26">备注</text>
				<input v-model="remark" style="width: 360rpx; text-align: right; font-size: 28rpx;" type="text" placeholder="建议备注前先于商家沟通确认" />
			</view>
		</view>
		
		<view class="pay-methods-wrapper conteainer-public-style mg24 fz30">
			<view class="pay-methods-title">
				付款方式
			</view>
			<view class="pay-list fz26">
				<radio-group @change="radioChange">
					<!-- <label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1">
						<view class="flex-c">
							<image class="play-icon"  src="/static/images/wx-pay.png" mode=""></image>
							<view>微信支付</view>
						</view>
						<radio :value="payType.PayTypeWeChatPay" checked color="#F33C72" />
					</label> -->
					<label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1"> 
						<view class="flex-c">
							<image class="play-icon"  src="/static/images/zfb-pay.png" mode=""></image>
							<view>支付宝支付</view>
						</view>
						<radio :value="payType.PayTypeAliPay"  checked color="#F33C72" />
					</label>
					
					<label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1">
						<view class="flex-c">
							<image class="play-icon"  src="/static/images/image59@2x.png" mode=""></image>
							<view>金豆支付</view>
						</view>
						<radio :value="payType.PayTypeJinDou" color="#F33C72" />
					</label>
					<label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1">
						<view class="flex-c">
							<image class="play-icon"  src="/static/images/yueb.png" mode=""></image>
							<view>余额支付</view>
						</view>
						<radio :value="payType.PayTypeBalance" color="#F33C72" />
					</label>
				</radio-group>
			</view>
		</view>
		
		<view class="coupon-wrapper conteainer-public-style mg24">
			<view class="coupon-item flex-c-s">
				<text class="fz26">商品金额</text>
				<text class="fz22">¥ {{ goodsInfo?.sellingPrice }}</text>
			</view>
			<view class="coupon-item flex-c-s">
				<text class="fz26">优惠券</text>
				<text class="fz22 color-theme">- ¥{{preferentialPrice}}</text>
			</view>
			<view class="flex-c-s">
				<text></text>
				<view ><text class="fz26">共{{count}}件，合计:</text> <text class="fz32">¥ {{totalPrice}}</text> </view>
			</view>
		</view>
		
		<view class="bottom-wrapper">
			<view class="submit-order flex-c-s">
				<view class="pay-total-mony">
					<text class="fz26">合计：</text>
					<text class="color-theme">￥ {{totalPrice}}</text>
				</view>
				<view class="">
					<button class="submit-btn" @click="paymentResult">提交订单</button>
				</view>
			</view>
		</view>
		<!-- <Payment ref="paymentCom" /> -->
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getStoreProductInfo, createOrder, paymentHadle } from '@/http/shop'
import { getOrderTime } from '@/utils/tools'
// import Payment from '@/components/Payment.vue'
import { payType } from '@/config'
import type { IStoreGoods } from '@/types'

export default defineComponent({
	// components: { Payment },
	setup() {
		const paymentCom = ref()
		const state = reactive({
			count: 1,
			remark: '',
			preferentialPrice: 0, // 优惠金额
			goodsInfo: {} as IStoreGoods,
			payType,
			type: 2
		})
		
		const changeValue = (e: number) => {
			console.log(e);
		}
		
		const radioChange = (e: any) => {
			state.type = e.detail.value;
			console.log(state.type)
		}
		
		onLoad((option) => {
			if(option?.id) {
				getProductInfo(option?.id)
			} 
		})
		
		const getProductInfo = async (id: number) => {
			let res = await getStoreProductInfo(id)
			if(res.code === 0) {
				state.goodsInfo = res.data
			}
			console.log(res);
		}
		
		const totalPrice = computed(() => {
			let price = Number.parseFloat(String(state.goodsInfo.sellingPrice * state.count - state.preferentialPrice)).toFixed(2)
			console.log(price);
			return price
		})
		
		const paymentResult = async () => {
			let pramas = {
				productId: state.goodsInfo.id,
				productQuantity: state.count,
				appointmentTime: getOrderTime(),
				remark: state.remark,
				payType: state.type
			}
			//return
			let res = await createOrder(pramas)
			if(res.code === 0) {
				if(state.type == 2){
					let resPay = await paymentHadle({
						orderId: res.data.orderId,
						payType: state.type
					})
					if(resPay.code === 0) {
						uni.requestPayment({
						    provider: 'alipay',
						    orderInfo: resPay.data.payParam, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
						    success: function (res) {
						        console.log('success:', res);
						    },
						    fail: function (err) {
						        console.log('fail:' + JSON.stringify(err));
						    }
						});
					}
				}else{
					uni.showToast({
						title: '支付成功'
					})
				}
			}
		}
		return {
			paymentCom,
			totalPrice,
			changeValue,
			radioChange,
			paymentResult,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{background-color: #f8f8fa;}
</style>

<style lang="scss" scoped>
.confirm-order-wrapper{
	 padding-bottom: 200rpx;
	.address-information-wrapper{
		.province-city-area{
			margin-left: 10rpx;
		}
		.address-info{
			margin: 10rpx 0;
		}
	}
	.order-goods-wrapper{
		.goods-order-info{
			margin-top: 34rpx;
			
			.goods-info{
				align-items: flex-start;
			}
			.goods-name{
				width: 300rpx;
				margin-left: 18rpx;
			}
			.color-theme{
				padding: 20rpx 0;
			}
		}
	}
	.pay-methods-wrapper{
		.pay-list{
			.play-icon{
				width: 34rpx;
				height: 34rpx;
				margin-right: 16rpx;
			}
			.uni-list-cell{
				padding: 16rpx 0;
			}
		}
	}
	.coupon-wrapper{
		.coupon-item{
			margin-bottom: 36rpx;
		}
	}
	.submit-order{
		width: 100%;
		box-sizing: border-box;
		margin: 0 24rpx;
		.pay-total-mony{
			.color-theme{
				font-size: 42rpx;
			}
		}
		.submit-btn{
			color: #fff;
			line-height: 74rpx;
			width: 286rpx;
			height: 74rpx;
			background: linear-gradient(270deg,#eb57ae 0%, #eb5480);
			border-radius: 38rpx;
		}
	}
}

</style>